<template>
	<div class="singerList" v-if="!!hotMusic">
		<div v-for="item2,index in items2">
			<div>{{item2}}</div>
			<div class="gengduo">
				<ul class="gengduo_img">
					<li>更多</li>
					<li>
						<div><img src="../images/small.png"/></div>
					</li>
				</ul>
			</div>
			<slot>
				<musicList class="musiclist" :srcImg="hotMusic"></musicList>
			</slot>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import musicList from "./musicList";
	export default {
		name:"singerList",
		data(){
			return{
				items2:["华语","欧美","韩国","日本"],
				hotMusic:[],
			}
		},
        components:{
        	musicList,
        },
        computed:{
        	
        },
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.hotMusic){//判断之前是否已经存储了hotMusic信息
                var tem = JSON.parse(sessionStorage.hotMusic);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.hotMusic = tem.data;
                    console.log( this.hotMusic);
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=13&size=3&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.hotMusic = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.hotMusic = JSON.stringify({//把json对象格式转化为字符串
                    	
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.hotMusic = res;
                }
            })
        }
	}
</script>

<style scoped lang="scss">
	.singerList{
		overflow-x: hidden;
		width: 100%;
		div{
			margin-top: 2%;
			div{
				color: #ddd;
				display: inline-block;
			}
			.gengduo{
				float: right;
				margin-right: 2%;
				.gengduo_img{
					&>li{
						display: inline-block;
						&>div{
							width: 8px;
							height:8px;
							line-height:13px;
							&>img{
								width: 100%;
								vertical-align: middle;
							}
						}
					}
				}
			}
			.musiclist li{
				width: 32.33%;
				height: 20%;
				background: #000;
				display: inline-block;
				margin-top: 3%;
				margin-right: 1%;
			}
		}
	}
</style>